@use '../src/internal' as *;

@if should-generate-classes($LINKS-EXT) {
    /* EXTENDED LINKS */
    /* Animated links */
    .u,
    .utb {
        display: inline;
        position: relative; /* So the psuedo-elements are positioned correctly */
    }

    /* Underline */
    .u {
        &::after {
            content: '';
            transition: all 0.3s;
            backface-visibility: hidden;
            position: absolute;
            height: 2px;
            width: 0;
            background: currentColor;
            bottom: -0.25em;
        }

        &:hover::after {
            width: 100%;
        }

        &.u-LR::after {
            /* Left to Right */
            left: 0;
        }

        &.u-LR::after {
            /* Left to Right */
            left: 0;
        }

        &.u-RL::after {
            /* Right to Left */
            right: 0;
        }

        &.u-RL:hover::after {
            width: 100%;
        }

        &.u-C::after {
            /* Center Outwards */
            left: 50%;
            transform: translateX(-50%);
        }
    }

    /* Underline top and bottom */
    .utb {
        &::before,
        &::after {
            content: '';
            transition: all 0.3s;
            backface-visibility: hidden;
            position: absolute;
            height: 2px;
            width: 0;
            background: currentColor;
        }

        &::before {
            top: -0.25em;
        }

        &::after {
            bottom: -0.25em;
        }

        &:hover::before,
        &:hover::after {
            width: 100%;
        }

        &.utb-LR::before,
        &.utb-LR::after {
            left: 0;
        }

        &.utb-RL::before,
        &.utb-RL::after {
            right: 0;
        }

        &.utb-C::before,
        &.utb-C::after {
            left: 50%;
            transform: translateX(-50%);
        }

        /* Opposite start */
        &.utb-OLR::before {
            /* Suffix denotes border transition direction for the top border (left to right). Bottom border will be the opposite direction */
            left: 0;
        }

        &.utb-OLR::after {
            right: 0;
        }

        &.utb-ORL::before {
            right: 0;
        }

        &.utb-ORL::after {
            left: 0;
        }
    }
}
